<template>
  <div class="container">
    <van-swipe class="swipe" :autoplay="3000">
      <van-swipe-item>
        <img src="~@/assets/img/index_banner1.jpg">
      </van-swipe-item>
      <van-swipe-item>
        <img src="~@/assets/img/index_banner2.jpg">
      </van-swipe-item>
    </van-swipe>
    <div class="nav">
      <div class="nav-box">
        <van-row type="flex" justify="space-around">
          <van-col span="6" v-for="item,index in navList1" :key="index">
            <template v-if="item.name==='学习强国'">
              <div @click="onOpenApp">
                <img :src="item.imgurl">
                <div class="nav-title">{{item.name}}</div>
              </div>
            </template>
            <router-link v-else :to="item.path">
              <img :src="item.imgurl" alt>
              <div class="nav-title">{{item.name}}</div>
            </router-link>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
          <van-col span="6" v-for="item,index in navList2" :key="index">
            <router-link :to="item.path">
              <img :src="item.imgurl" alt>
              <div class="nav-title">{{item.name}}</div>
            </router-link>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="article-list-wrap">
      <router-link class="article-title" to="news">
        <van-cell title="新闻资讯" is-link to="index"/>
      </router-link>
      <div class="article-list">
        <template v-for="item in focusNewsList">
          <article-cell :key="item.id" :data="item"></article-cell>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import articleCell from '@/components/article-cell'

export default {
  components: {
    articleCell
  },
  data () {
    return {
      focusNewsList: [],
      navList1: [
        {
          imgurl: require('@/assets/img/index_news.png'),
          name: '党建新闻',
          path: '/news'
        },
        {
          imgurl: require('@/assets/img/index_dynamic.png'),
          name: '党委动态',
          path: '/dynamic-party'
        },
        {
          imgurl: require('@/assets/img/index_study.png'),
          name: '学习强国',
          path: '/news'
        },
        {
          imgurl: require('@/assets/img/index_example.png'),
          name: '党员先锋',
          path: '/party-member'
        }
      ],
      navList2: [
        {
          imgurl: require('@/assets/img/index_seminar.png'),
          name: '专题专栏',
          path: '/subject'
        },
        {
          imgurl: require('@/assets/img/index_mien.png'),
          name: '党建简报',
          path: 'party-pioneer'
        },
        {
          imgurl: require('@/assets/img/index_organize.png'),
          name: '基层动态',
          path: '/dynamic-organization'
        },
        {
          imgurl: require('@/assets/img/index_pioneer.png'),
          name: '排行榜',
          path: '/index-ranking'
        }
      ]
    }
  },
  created () {
    this.getArticles()
    this.$store.commit('setCurrentBar', 0)
  },
  methods: {
    getArticles () {
      this.$axios.get('/xbkj-dj/web/article/articleList').then(res => {
        res.data.forEach(item => {
          if (item.id == '221a19008fcd4b17b6780febb0f088b8') {
            this.focusNewsList = item.articleEntity
          }
        })
      })
    },
    onOpenApp () {
      const u = navigator.userAgent
      try {
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
          // 安卓手机
          android.startOrDownload()
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.article-list-wrap {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 20px;
  .article-title {
    display: block;
    margin-bottom: -15px;
  }
  .van-cell {
    padding: 10px 0;
    font-weight: bold;
    /deep/ .van-cell__right-icon {
      color: #000;
    }
  }
}

.swipe img {
  width: 100%;
  display: block;
}
.nav {
  background-color: #fff;
}
.nav-box {
  position: relative;
  top: -20px;
  width: 90%;
  margin: 0 auto;
  padding: 15px 0 5px 0;
  // border: 1px solid #ddd;
  box-shadow: 0 0 3px #ddd;
  background-color: #fff;
  text-align: center;
  border-radius: 8px;
}
.nav-box img {
  width: 25px;
}
.nav-box .nav-title {
  padding-bottom: 10px;
  font-size: 12px;
}
</style>
